<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
            <el-form-item label="企业名称：" prop="csc_name">
			   <el-col :span="8">
				   <el-input v-model="form.csc_name" placeholder="请输入企业名称"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="企业地址：" prop="csc_address">
			   <el-col :span="8">
				   <el-input v-model="form.csc_address" placeholder="请输入企业地址"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="电话：" prop="csc_phone">
			   <el-col :span="8">
				   <el-input v-model="form.csc_phone" placeholder="请输入电话"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="微信：" prop="csc_weixin">
			   <el-col :span="8">
				   <el-input v-model="form.csc_weixin" placeholder="请输入微信"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="公众号二维码：" prop="csc_gz_qrcode">
			   <el-col :span="8">
				   <upload-image :preview="form.csc_gz_qrcode" v-on:cropperImage="gzQrocde_cropperImageClick" v-on:uploadImageChange="gzQrocde_uploadImageChange"></upload-image>
				   
				   <el-button @click="imgBoxBtn(form,1)" style="margin-top: 10px;">从图库选择</el-button>
			   </el-col>
		   </el-form-item>
           <el-form-item label="微博：" prop="csc_weibo">
			   <el-col :span="8">
				   <el-input v-model="form.csc_weibo" placeholder="请输入微博"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="微博二维码：" prop="csc_weibo_qrcode">
			   <el-col :span="8">
				   <upload-image :preview="form.csc_weibo_qrcode" v-on:cropperImage="weiboQrocde_cropperImageClick" v-on:uploadImageChange="weiboQrocde_uploadImageChange"></upload-image>
				   
				   <el-button @click="imgBoxBtn(form,2)" style="margin-top: 10px;">从图库选择</el-button>
			   </el-col>
		   </el-form-item>
           <el-form-item label="营业时间：" prop="csc_business_hours">
			   <el-col :span="8">
				   <el-input v-model="form.csc_business_hours" placeholder="请输入营业时间"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="版权声明：" prop="csc_copy">
			   <el-col :span="8">
				   <el-input v-model="form.csc_copy" placeholder="请输入版权声明"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="备案号：" prop="csc_icp">
			   <el-col :span="8">
				   <el-input v-model="form.csc_icp" placeholder="请输入备案号"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="站点描述：" prop="csc_descibe">
			   <el-col :span="8">
				   <el-input v-model="form.csc_descibe" placeholder="请输入站点描述"></el-input>
			   </el-col>
		   </el-form-item>
           <el-form-item label="邮箱：" prop="csc_email">
			   <el-col :span="8">
				   <el-input v-model="form.csc_email" placeholder="请输入邮箱"></el-input>
			   </el-col>
		   </el-form-item>
          

           <el-col :span="24" v-if="customModelData.length > 0">
                <div class="customFieldInput">
                    自定义模型设置（该部分为自定义模型部分，如果没有自定义模型，则不会显示）
                </div>
           </el-col>
           <el-form-item :label="'自定义模型 ' + (index+1) + ' :'" v-for="item,index in customModelData">
			   <el-col :span="8">
				   <el-input type="textarea" rows="4" v-model="form[item.COLUMN_NAME]" :placeholder="item.COLUMN_COMMENT + '，数据类型：' + (item.DATA_TYPE == 'varchar' ? '文本' : '数字')"></el-input>
                   <span class="fieldCommentHint">{{item.COLUMN_COMMENT}}</span>
			   </el-col>
		   </el-form-item>

            <el-form-item>
			   <el-button type="primary" @click="submitForm('form')">提交</el-button>
			   <el-button @click="resetForm">重置</el-button>
		   </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                rules : {
				   csc_name : [
					   { required: true, message: '请输入字段名称', trigger: 'blur' }
				   ]
                },
            }
        },
        //初始化函数
        mounted() {
            //获取原配置
            this.initData();

            //获取自定义模型
			this.getCustomField();
        },
        //计算属性
        computed: {
            ...mapState({
                form : state => state.BasicInfoSettingModule.form,
                customModelData : state => state.BasicInfoSettingModule.customModelData
			})
        },
        //组件方法
        methods: {
            getCustomField(){

                var params = {
					// appKey 	  : this.$localData.getEasydCloudAppKey(),
					appKey 	  : 'easyd_cms',
					tableName : "easyd_cms_site_config"
                }

                this.$myLoading.startLoading()
                this.$http.postHttp(
                    this.$API.modelManagerGetCustomModel,
					params,
					rs => {
						this.$store.commit('BasicInfoSettingModule/updateCustomModelData',rs)
                        this.$myLoading.endLoading()
                    }
                )
                


            },
            initData(){
                
                this.$myLoading.startLoading()
				this.$http.getHttp(
					this.$API.cmsSiteConfigSearch,
					rs => {
                        this.$myLoading.endLoading()
                        if(rs.data.length > 0){
                            this.$store.commit('BasicInfoSettingModule/updateForm',rs.data[0]);
                        }
					}
			    )
            },
            submitForm(form){
				
				this.$refs[form].validate((valid) => {

					if (valid) {

						this.$myLoading.startLoading()
						this.$http.postHttp(
						this.$API.siteConfigSetting,
						this.form,
							rs => {
								this.$myLoading.endLoading()
								this.$myPop.SuccessMessage()
							}
						)
						
					}

				})
				
            },
            
            weiboQrocde_cropperImageClick() {
				var that = this;
				this.$cropperImage({
					//裁切完成后回调函数
					cropperImageResult(file) {
						that.$http.Aliyun_uploadImageHttp(file, rsUrl => {
							that.form.csc_weibo_qrcode = rsUrl;
						})
					},
					//要裁切的图片
					imgUrl: this.form.csc_weibo_qrcode
				});
			},
			weiboQrocde_uploadImageChange(e){
				var fileObj = e.target.files[0];
				this.$http.Aliyun_uploadImageHttp(fileObj,rsUrl => {
					this.form.csc_weibo_qrcode = rsUrl
				});
			},
            gzQrocde_cropperImageClick() {
				var that = this;
				this.$cropperImage({
					//裁切完成后回调函数
					cropperImageResult(file) {
						that.$http.Aliyun_uploadImageHttp(file, rsUrl => {
							that.form.csc_gz_qrcode = rsUrl;
						})
					},
					//要裁切的图片
					imgUrl: this.form.csc_gz_qrcode
				});
			},
			gzQrocde_uploadImageChange(e){
				var fileObj = e.target.files[0];
				this.$http.Aliyun_uploadImageHttp(fileObj,rsUrl => {
					this.form.csc_gz_qrcode = rsUrl
				});
			},
			resetForm(){
				this.$store.commit('BasicInfoSettingModule/clearForm');
			},
            imgBoxBtn(items,type) {
                var that = this
                //回调函数
                this.$selectImageBox({
                    selectImageValue(item){
                    	console.log('------回调！？？！？！')
                    	console.log(item)
                    	if(type == 1){
                    		items.csc_gz_qrcode = item;
                    	}else if(type == 2){
                    		items.csc_weibo_qrcode = item;
                    	}
                    }
                })
            },
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.customFieldInput {
    width 100%
    height 40px
    background #eee
    margin-bottom 30px
    padding-left 20px
    box-sizing border-box
}

.fieldCommentHint {
    color red
}
</style>